<template>
    <div>
        <div class="chat-footer" @click="onTogglePop()">
            <div>
                <p class="send-msg">想要发送的内容。。。</p>
                <div class="send-btn"><img @click="onTogglePop()" src="../assets/img/发送.png" alt=""></div>

            </div>
        </div>
        <div class="send-msg-pop animated fast" :class="togglePop?'slideInUp':'slideOutDown'">
            <div class="chat-footer">
                <div>
                    <p class="send-msg">想要发送的内容。。。</p>
                    <div class="send-btn"><img src="../assets/img/发送.png" alt=""></div>

                </div>
                <div class="send-msg-pop animated fast slideInUp">
                    <ul>
                        <li v-for='(item,index) in rightDatas'>{{item}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="pop-bg animated" :class="[togglePop ? 'fadeIn' : 'fadeOut']" @click="onTogglePop()"></div>
    </div>

</template>
<script>
    export default {
        props: {
            rightDatas: {
                type: Array,
                required: true,
                default: []
            }
        },
        data:function () {
            return {
                togglePop:true
            }
        },
        methods:{
            onTogglePop(){
                this.togglePop = !this.togglePop;
            }
        }
    }

</script>
<style scoped lang="less">
    .chat-footer {
        background: linear-gradient(to bottom, #f3f3f3, #e3e2e2);;
        height: 44px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
    }

    .send-msg {
        display: inline-block;
        width: 78%;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 6px;
        float: left;
        background-color: white;
        color: #bbb;
        margin: 6px 0 6px 4%;
        text-align: left;
        line-height: 30px;
        padding-left: 8px;
    }

    .send-btn {

        img {
            width: 32px;
            margin: 6px 18px 6px 0;
            float: right;
        }

    }

    .send-msg-pop {
        z-index: 100;
        position: absolute;
        width: 100%;
        bottom: 0;

        .chat-footer {
            position: relative;

            img {
                transform: rotate(45deg);
            }

        }

        ul {
            background-color: white;
            padding: 0px;

            li {
                border-bottom: 1px solid rgba(187, 187, 187, 0.39);;
                min-height: 28px;
                line-height: 28px;
            }

        }
    }

    .pop-bg {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(43, 42, 42, 0.47);
    }

    .fast {
        -webkit-animation-duration: .2s;
        animation-duration: .2s;
    }

    .fadeIn {
        display: block;
    }

    .fadeOut {
        display: none;
    }
</style>